<!--<div class="cs-top">
        <el-steps align-center :active="steps" finish-status="success">
          <el-step title="企业认证"></el-step>
          <el-step title="完善信息"></el-step>
          <el-step title="选择银行"></el-step>
          <el-step title="拉取退税/关单数据"></el-step>
          <el-step title="申请授信"></el-step>
        </el-steps>
      </div>-->
<template>
  <div>
    <top v-if="showTop" current="work"></top>
    <div class="main-content credit-step">
      <sidebar @childEvent="showCurrentTab" :tab="currentTab" id="sidebar" title="0"></sidebar>
      <div class="cs-top cs-middle">
        <!--授信申请全流程-->
        <div v-if="currentTab=='workplace'" v-loading="loadingInstance" style="height: 400px" id="creditStep"
             element-loading-text="数据加载中">

            <!--税控盘认证-->
            <llt-smrz v-if="steps==0" v-on:llt-smrz="refreshStepZt"></llt-smrz>

            <!--补充KYC信息-->
            <supply-info v-else-if="steps==1" actionType="2" v-on:supply-completed="refreshStepAfterKyc" :ztInfo="ztInfo"></supply-info>

            <!--选择产品-->
            <div class="cm-select" v-else-if="steps==20">
              <div v-if="showRz">
                <div class="cs-item_top">
                  <img src="../../../assets/homeNew/completed.png" alt="">
                </div>
                <div class="cs-item_top">
                  <span>恭喜您，通过企业认证，当前暂无融资申请产品，</span>
                  <a @click="goProductList">快速前往申请</a>
                </div>
              </div>
              <select-bank v-else v-on:selected-bank="selectedBank"></select-bank>
            </div>

            <zt-smrz v-else-if="steps==2" v-on:zt-smrz="refreshStep"></zt-smrz>


            <!--拉取退税数据-->
            <div v-else-if="steps==21">
              <query-history ref="myComponent1"
                             busType="Apply" v-on:history-completed="refreshStep">
              </query-history>
            </div>

            <!--授信申请开始-->
            <credit-apply :expire="expire" :productCode="productCode" ref="myComponent2" v-else-if="steps==4" v-on:apply-completed="refreshStep" :code="code"></credit-apply>

            <!--授信申请结果-->
            <template v-else-if="steps==5">
              <zs-result v-if="productCode==zsProductCode" :productCode="productCode" ref="myComponent3" :code="code"></zs-result>
              <nb-result v-else-if="productCode==nbProductCode" :productCode="productCode" ref="myComponent3" :code="code"></nb-result>
            </template>

        </div>

        <div class="plat-loan plat-loan_last" v-else-if="currentTab=='companyInfo'">
          <supply-info actionType="1"></supply-info>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Top from '@/components/layout/top';

import sidebar from "@/components/layout/sidebar";
import supplyInfo from "../../process/supplyInfo";
import selectBank from "../../process/selectBank";
import queryHistory from "../../process/queryHistory";
import creditApply from "../../process/creditApply";
import zsResult from "../plat/zsbank/creditResult";
import nbResult from "../plat/nbbank/creditResult";
import lltSmrz from "../../process/lltSmrz";

import platLoan from "../plat/zsbank/platLoan";
import platRepay from "../plat/zsbank/platRepay";

import {queryCreditApplyStep} from '../../../api/authen/agreed'
import ztSmrz from "../../process/ztSmrz";

export default {
  data() {
    return {
      expire:false,
      showRz:true,
      steps: null,
      currentTab:'workplace',
      /*即fundCode*/
      code: '',
      loadingInstance:false,
      showTop: true,
      isCredited:false,
      timer1:null,
      /*showKycSuccess: false,*/
      productCode:'',
      /*从中天税控盘获取的信息*/
      ztInfo:{
        uscCode:'',
        tenantName:''
      },
      nbProductCode:'',
      zsProductCode:''
    };
  },
  components: {
    supplyInfo,
    selectBank,
    queryHistory,
    creditApply,
    zsResult,
    nbResult,
    platLoan,
    platRepay,
    sidebar,
    Top,
    lltSmrz,
    ztSmrz
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  created() {
     this.initPageCss();
  },
  mounted() {

    this.nbProductCode = process.env.NB_CODE;
    this.zsProductCode = process.env.ZS_CODE;
    this.code = this.$route.query.code?this.$route.query.code:'';
    this.productCode = this.$route.query.productCode?this.$route.query.productCode:'';

    this.queryCurrentStep();
    //this.steps = 21;
  },
  methods: {
    goProductList(){
      //showRz=!showRz
      this.$router.push({
        name: 'productList'
      });
    },
    initPageCss(){
      setTimeout(()=>{
        let $dom = document.getElementById('creditStep');
        if(!!$dom){
          let Height = $dom.offsetHeight;
          document.getElementById('sidebar').style.height = Height + 'px';
        }
      },500);
    },
    showCurrentTab(e){
      let _ = this;
      this.currentTab = e.current;
      this.loadingInstance = false;
      this.initPageCss();

      // 下面这段内容写在父组件获取值的地方
      this.showTop= false;
      this.$nextTick(() => {
        _.showTop= true;
      });

      this.currentTab=='workplace' && this.queryCurrentStep();
    },

    selectedBank(result){
      this.queryCurrentStep();
    },
    refreshStepZt(param){
      this.ztInfo.tenantName = param.tenantName;
      this.ztInfo.uscCode = param.uscCode;
      this.refreshStep();
    },
    refreshStep() {
      this.queryCurrentStep('interval');
    },
    refreshStepAfterKyc(){
      //this.showKycSuccess = true;
      this.queryCurrentStep('interval');
    },
    /*hideSuccess(){
      this.showKycSuccess = false;
    },*/
    /***
     * 查询接口
     * 入参 code
     * 返回 return step
     * 0:连连通实名，
     * 1:补充KYC信息，
     * 2:中天实名,
     * 21拉取退税数据,
     * 20:选择产品
     * 4:授信申请,
     * 5:已完成授信
     * 6:授信过期
     */
    queryCurrentStep() {
      let _ = this;
      let id = this.user.user.id?this.user.user.id:'';
      this.loadingInstance = true;

      queryCreditApplyStep(id).then(res=>{
        _.loadingInstance = false;
        if(res.code==200){

            switch (res.data) {
              case "0":
                _.steps = 0;
                break;
              case "1":
                _.steps = 1;
                break;
              case "2":
                _.steps = 2;
                break;
              case "21":
                _.steps = 21;
                break;
              case "4":
                _.steps = !!_.code ? 4 : 20;
                /*if(!!_.code){
                  _.$nextTick(() => {
                    _.$refs.myComponent2.initCreditApply();
                  });
                }*/
                break;
              case "5":
                _.steps = 5;
                /*_.$nextTick(() => {
                  _.$refs.myComponent3.queryApplyStatus();
                });*/
                break;
              case "6":
                _.steps = 4;
                _.expire = true;

                break;
            }

        }
        _.initPageCss();
      }).catch(e=>{
        _.loadingInstance = false;
        _.initPageCss();
      })
    }
  }
}
</script>

<style lang="scss">
.credit-step {
  font-size: 14px;
  background-color: #f8f8f8;
  .cs-top {
    background-color: #fff;
    width: 1200px;
    margin: 0 auto;
    height: 118px;
    padding: 20px;
    .el-step__head.is-success{
      color: #FF9B00;
      border-color: #FF9B00;
    }
    .el-step__title.is-success {
      color: #FF9B00;
    }
  }

  .cs-middle {
    min-height: calc(100vh - 90px);
    width: 1048px;
    float: left;
    height: 100%;
    padding: 0;
    .cm-select{
      .product{
        margin-top: 0;
      }
      .cs-item_top{
        text-align: center;
        a{
          color: #FFA01D;
        }
      }
    }
  }
}
</style>
